<template>
  <div class="l-echart-funnel"
       :style="styleSizeName"
       @click="handleClick">
    <div :ref="id"
         :style="styleChartName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    computed: {
        x2 () {
            return this.option.gridX2 || 20;
        },
        fontSize () {
            return this.option.fontSize || 14;
        }
    },
    methods: {
        updateChart () {
            const optionData = this.$deepClone(this.dataChart);
            const option = {
                title: this.ishasprop(this.option.titleShow, {
                text: this.option.title,
                subtext: this.option.subtext || '',
                textStyle: {
                    color: this.option.titleColor || '#333',
                    fontSize: this.option.titleFontSize || 16
                },
                left: this.option.titlePostion || 'auto',
                subtextStyle: {
                    color: this.option.subTitleColor || '#aaa',
                    fontSize: this.option.subTitleFontSize || 14
                }
                }, {}),
                tooltip: this.ishasprop(this.formatter, {
                formatter: name => { return this.formatter(name, this.dataChart) }
                }, {
                backgroundColor: this.option.tipBackgroundColor || 'rgba(50,50,50,0.7)',
                borderWidth: '0',
                textStyle: {
                    fontSize: this.option.tipFontSize,
                    color: this.option.tipColor || "#fff"
                }
                }),
                grid: {
                left: this.option.gridX || 20,
                top: this.option.gridY || 60,
                right: this.x2,
                bottom: this.option.gridY2 || 60
                },
                legend: {
                show: this.$vaildData(this.option.legend, false),
                orient: this.option.legendOrient || "horizontal",
                top: 0,
                x: this.option.legendPostion || "right",
                right: this.x2,
                textStyle: {
                    fontSize: this.option.legendFontSize || 12
                },
                data: (() => {
                    let list = optionData;
                if (this.dataType === 2) {
                  if (this.labelKey && this.valueKey) {
                      const serieData = [];
                      list.forEach((t) => {
                          serieData.push({ name: t[this.labelKey], value: t[this.valueKey], list: list });
                      });
                      return serieData
                  }
                }
                    return optionData.map(ele => ele.name);
                })()
                },
                series: (() => {
                // const barColor = this.option.barColor || [];
                const list = [
                    {
                    type: "funnel",
                    animationDelay: function () {
                        return Math.random() * 200;
                    },
                    label: {
                        show: this.$vaildData(this.option.labelShow, false), //开启显示
                        textStyle: {
                        fontSize: this.option.labelShowFontSize || 14,
                        color: this.option.labelShowColor || "#333",
                        fontWeight: this.option.labelShowFontWeight || 500,
                        },
                        formatter: this.labelFormatter ? name => this.getLabelFormatter(name) : '{c}',
                    },

                    data: (() => {
                        let list = optionData;
                        if (this.dataType === 2) {
                  if (this.labelKey && this.valueKey) {
                      const serieData = [];
                      list.forEach((t) => {
                          serieData.push({ name: t[this.labelKey], value: t[this.valueKey], list: list });
                      });
                      list = serieData
                  }
                }
                        if (this.option.notCount) {
                        list = list.filter(ele => {
                            if (ele.value !== 0 && ele.value) {
                            return true;
                            }
                        });
                        }
                        if (this.option.sort) {
                        list.sort(function (a, b) {
                            return a.value - b.value;
                        });
                        }
                        return list;
                    })(),
                    itemStyle: this.ishasprop(!this.switchTheme, {
                        normal: {
                        color:
                            params => this.getColor(params.dataIndex)
                        }
                    }, {                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                        }              })
                    }
                ];
                return list;
                })()
            };
            this.myChart.resize();
            this.myChart.setOption(option, true);
        },
        handleClick() {
            this.clickFormatter && this.clickFormatter({
                data: this.dataChart
            }, this.getItemRefs());
        },
    }
};
</script>



